
%button_basic {
  @include button(normal);

  &:focus { @include button(focus); }

  &:hover { @include button(hover); -gtk-icon-filter: brightness(1.2); }

  &.keyboard-activating, &:active { @include button(active); }

  &:disabled { @include button(disabled); }

  &:checked {
    @include button(checked);

    &:hover { @include button(checked-hover); }

    &:active { @include button(checked-active); }

    &:disabled { @include button(checked-disabled); }
  }
}

%button_basic_flat {
  @include button(flat-normal);

  &:focus:not(:hover):not(:active) { @include button(flat-focus); }

  &:hover { @include button(flat-hover); }

  &.keyboard-activating, &:active { @include button(flat-active); }

  &:disabled { @include button(flat-disabled); }

  &:checked {
    @include button(flat-checked);

    &:hover { @include button(flat-checked-hover); }

    &:active { @include button(flat-checked-active); }

    &:disabled { @include button(flat-checked-disabled); }
  }
}

%button_basic_raised {
  background-color: $button_color;

  &:hover {
    background-color: $button_hover_color;
  }

  &.keyboard-activating,
  &:active {
    background-color: $button_active_color;
  }

  &:checked {
    background-color: $button_checked_color;

    &:hover {
      background-color: $button_checked_hover_color;
    }

    &.keyboard-activating,
    &:active {
      background-color: $button_checked_active_color;
    }
  }
}

@at-root %opaque_button {
  box-shadow: none;

  @include focus-ring($outer: true, $offset: 1px, $transition: $button_transition);

  .osd &:focus:focus-visible {
    outline-color: $osd_focus_color;
  }

  &:hover {
    background-image: image(gtkalpha(currentColor, .1));
  }

  &.keyboard-activating,
  &:active {
    background-image: image(transparentize(black, .8));
  }

  &:checked {
    background-image: image(transparentize(black, .85));

    &:hover {
      background-image: image(transparentize(black, .95));
    }

    &.keyboard-activating,
    &:active {
      background-image: image(transparentize(black, .7));
    }
  }
}

%small_button {
  min-height: $small_size;
  min-width: $small_size;
  padding: 0;
  border-radius: $circular_radius;
}

$opaque_button_default_bg: gtkmix($window_bg_color, $window_fg_color, 85%);

%button,
button {
  min-height: 24px;
  min-width: 16px;
  padding: ($medium_size - 24px) / 2 ($medium_size - 16px) / 2;
  border-radius: $button_radius;
  font-weight: bold;
  @extend %button_basic;

  .osd &:focus:focus-visible {
    outline-color: $osd_focus_color;
  }

  &:disabled {
    filter: opacity($disabled_opacity);

    label {
      filter: none;
    }
  }

  &.image-button {
    min-width: 24px;
    padding-left: ($medium_size - 24px) / 2;
    padding-right: ($medium_size - 24px) / 2;

    &.close-button {
      padding: 0;
      border-radius: $circular_radius;
    }
  }

  &.text-button {
    padding-left: $base_padding * 2 + 4px;
    padding-right: $base_padding * 2 + 4px;
  }

  &.text-button.image-button,
  &.image-text-button {
    padding-left: $base_padding * 1.5;
    padding-right: $base_padding * 1.5;

    > box,
    > box > box {
      border-spacing: $base_margin;

      > label {
        padding-left: $base_margin / 2;
        padding-right: $base_margin / 2;
      }
    }
  }

  &.arrow-button {
    padding-left: $base_padding * 1.5;
    padding-right: $base_padding * 1.5;

    > box { border-spacing: $base_margin; }

    &.text-button {
      > box { border-spacing: $base_margin; }
    }
  }

  @at-root %button_basic_drop_active,
  &:drop(active) {
    color: $drop_target_color;
    box-shadow: inset 0 0 0 2px $drop_target_color;
  }

  // big standalone buttons like in Documents pager
  @at-root %osd_button,
  &.osd {
    min-width: $medium_size;
    min-height: $medium_size;
    @include focus-ring($outer: true, $offset: 1px, $transition: $button_transition);

    color: $osd_fg_color;
    background-color: transparentize(black, .35);

    &:hover {
      color: white;
      background-color: gtkalpha(gtkmix(black, currentColor, 85%), .65);
    }

    &.keyboard-activating,
    &:active {
      color: white;
      background-color: gtkalpha(gtkmix(black, currentColor, 75%), .65);
    }

    &:checked {
      background-color: gtkalpha(gtkmix(black, currentColor, 80%), .65);

      &:hover {
        background-color: gtkalpha(gtkmix(black, currentColor, 75%), .65);
      }

      &.keyboard-activating,
      &:active {
        background-color: gtkalpha(gtkmix(black, currentColor, 65%), .65);
      }
    }

    // Specificity bump
    &:drop(active) {
      @extend %button_basic_drop_active;
    }

    .osd &:focus:focus-visible {
      outline-color: $osd_focus_color;
    }
  }

  &.opaque {
    @extend %opaque_button;

    background-color: $opaque_button_default_bg;
    color: $window_fg_color;
  }

  &.destructive-action {
    @extend %opaque_button;

    color: $destructive_fg_color;

    &, &:checked {
      background-color: $destructive_bg_color;
    }
  }

  &.suggested-action {
    @extend %opaque_button;

    color: $accent_fg_color;

    &, &:checked {
      background-color: $accent_bg_color;
    }
  }

  &.flat {
    @extend %button_basic_flat;

    .osd &:focus:focus-visible {
      outline-color: $osd_focus_color;
    }

    // Specificity bump
    &:drop(active) {
      @extend %button_basic_drop_active;
    }
  }

  stackswitcher > & {
    // to position the needs attention dot, padding is added to the button
    // child, a label needs just lateral padding while an icon needs vertical
    // padding added too.

    > label {
      padding: 0 $base_padding;
      margin: 0 -$base_padding;
    }

    > image {
      padding: $base_padding / 2 $base_padding;
      margin: -$base_padding / 2 -$base_padding;
    }

    &.text-button { min-width: 100px; }

    &.needs-attention {
      > label,
      > image { @extend %needs_attention; }
    }
  }

  // hide separators
  &.font {
    separator { background-color: transparent; }
    > box { border-spacing: $base_padding; }
    > box > box > label { font-weight: bold; }
  }

  @at-root %circular_button,
  &.circular { // force circular button shape
    min-width: $medium_size - 2px;
    min-height: $medium_size - 2px;
    padding: 0;
    border-radius: $circular_radius;

    label { padding: 0; }
  }

  @at-root %pill_button,
  &.pill {
    padding: $base_padding * 1.5 $medium_size - 4px;
    border-radius: $circular_radius;
  }

  &.card {
    background-color: $card_bg_color;
    background-clip: padding-box;
    font-weight: inherit;
    padding: 0;

    @include focus-ring($offset: -1px, $transition: $button_transition);

    &:hover {
      background-image: image($view_hover_color);
    }

    &.keyboard-activating,
    &:active {
      background-image: image($view_active_color);
    }

    &:checked {
      background-color: $card_bg_color;
      background-image: image($view_selected_color);

      &:hover { background-image: image($view_selected_hover_color); }

      &.keyboard-activating,
      &:active { background-image: image($view_selected_active_color); }

      &.has-open-popup { background-image: image($view_selected_hover_color); }

      .osd & {
        background-color: gtkalpha(currentColor, .1);
      }
    }

    &:drop(active) {
      color: $drop_target_color;
      box-shadow: inset 0 0 0 1px $drop_target_color;
    }
  }
}

%undecorated_button {
  background-color: transparent;
}

button.color {
  padding: $base_padding;

  > colorswatch:only-child {
    border-radius: 2.5px;

    > overlay {
      border-radius: 2px;
    }

    &:disabled {
      filter: none;
    }

    &.light > overlay {
      border-color: gtkalpha($view_fg_color, 0.1);
    }
  }
}

menubutton {
  &.osd {
    background: none;
    color: inherit;

    > button { @extend %osd_button; }
  }

  &.circular > button { @extend %circular_button; }
  &.flat > button { @extend %button_basic_flat; }
  &.pill > button { @extend %pill_button; }

  &.suggested-action {
    background-color: $accent_bg_color;
    color: $accent_fg_color;
  }

  &.destructive-action {
    background-color: $destructive_bg_color;
    color: $destructive_fg_color;
  }

  &.opaque {
    background-color: $opaque_button_default_bg;
    color: $window_fg_color;
  }

  &.suggested-action,
  &.destructive-action,
  &.opaque {
    border-radius: $button_radius;

    &.circular, &.pill {
      border-radius: $circular_radius;
    }

    > button {
      @extend %opaque_button;

      &, &:checked {
        background-color: transparent;
        color: inherit;
      }
    }
  }

  &.image-button > button {
    min-width: 24px;
    padding-left: $base_padding;
    padding-right: $base_padding;
  }

  &.card > button {
    border-radius: $card_radius;
  }

  arrow {
    min-height: 16px;
    min-width: 16px;
    &.none {
      -gtk-icon-source: -gtk-icontheme('open-menu-symbolic');
    }
    &.down {
      -gtk-icon-source: -gtk-icontheme('pan-down-symbolic');
    }
    &.up {
      -gtk-icon-source: -gtk-icontheme('pan-up-symbolic');
    }
    &.left {
      -gtk-icon-source: -gtk-icontheme('pan-start-symbolic');
    }
    &.right {
      -gtk-icon-source: -gtk-icontheme('pan-end-symbolic');
    }
  }
}

splitbutton {
  border-radius: $button_radius;

  &, & > separator {
    transition: $button_transition;
    transition-property: background;
  }

  > separator {
    margin-top: $base_padding;
    margin-bottom: $base_padding;
    background: none;
  }

  > menubutton > button {
    padding-left: $base_margin;
    padding-right: $base_margin;
  }

  // Since the inner button doesn't have any style classes on it,
  // we have to add them manually
  &.image-button > button {
    min-width: 24px;
    padding-left: $base_padding;
    padding-right: $base_padding;
  }

  &.text-button.image-button > button,
  &.image-text-button > button {
    padding-left: $base_padding * 1.5;
    padding-right: $base_padding * 1.5;

    > box {
      border-spacing: $base_padding;
    }
  }

  &:disabled {
    filter: opacity($disabled_opacity);

    > button, > menubutton > button {
      filter: none;
    }
  }

  // Reimplementing linked so we don't blow up css
  > button:dir(ltr),
  > menubutton > button:dir(rtl) {
    border-top-right-radius: 0;
    border-bottom-right-radius: 0;
    margin-right: -1px;
  }

  > button:dir(rtl),
  > menubutton > button:dir(ltr) {
    border-top-left-radius: 0;
    border-bottom-left-radius: 0;
    margin-left: -1px;
  }

  @at-root %flat_split_button,
  &.flat {
    > separator {
      background: $border_color;
    }

    &:hover,
    &:active,
    &:checked {
      background: $hover_color;

      > separator {
        background: none;
      }
    }

    &:disabled {
      filter: opacity($strong_disabled_opacity);

      > button:disabled, > menubutton > button:disabled {
        filter: none;
      }
    }

    &:focus-within:focus-visible > separator {
      background: none;
    }

    > button,
    > menubutton > button {
      @extend %button_basic_flat;

      border-radius: $button_radius;
    }
  }

  &.suggested-action {
    background-color: $accent_bg_color;
    color: $accent_fg_color;
  }

  &.destructive-action {
    background-color: $destructive_bg_color;
    color: $destructive_fg_color;
  }

  &.opaque {
    background-color: $opaque_button_default_bg;
    color: $window_fg_color;
  }

  &.suggested-action,
  &.destructive-action,
  &.opaque {
    > button, > menubutton > button {
      @extend %opaque_button;

      &, &:checked {
        color: inherit;
        background-color: transparent;
      }
    }

    $_separator_color: gtkalpha(currentColor, $dimmer_opacity);

    > menubutton > button {
      &:dir(ltr) { box-shadow: inset 1px 0 $_separator_color; }
      &:dir(rtl) { box-shadow: inset -1px 0 $_separator_color; }
    }
  }

  > menubutton > button > arrow.none {
    -gtk-icon-source: -gtk-icontheme('pan-down-symbolic');
  }
}

buttoncontent {
  > box {
    border-spacing: $base_padding;

    > label {
      font-weight: bold;

      &:dir(ltr) { padding-right: 2px; }
      &:dir(rtl) { padding-left: 2px; }
    }
  }

  .arrow-button > box > &,
  splitbutton > button > & {
    > box > label {
      &:dir(ltr) { padding-right: 0; }
      &:dir(rtl) { padding-left: 0; }
    }
  }
}

tabbutton {
  label {
    font-weight: 800;
    font-size: 8pt;

    &.small {
      font-size: 6pt;
    }
  }

  indicatorbin > indicator,
  indicatorbin > mask {
    transform: translate(-1px, 1px);
  }
}
